<template>
  <div>
    <el-aside width="200px">
      <el-scrollbar>
        <el-menu :default-active="route.fullPath" class="el-menu-vertical-demo" style="height: 100vh;" :router="true">
          <template v-for="data in RouteList" :key="data.path">
            <el-sub-menu :index="data.path" v-if="data.children.length && checkAuth(data.path)">
              <template #title>
                <el-icon>
                  <component :is="mapIcon[data.icon]"></component>
                </el-icon>
                <span>{{ data.title }}</span>
              </template>
              <template v-for="item in data.children" :key="item.path">
                <el-menu-item :index="item.path" v-if="checkAuth(item.path)">
                  <el-icon>
                    <component :is="mapIcon[item.icon]"></component>
                  </el-icon>
                  <span>{{ item.title }}</span>
                </el-menu-item>
              </template>
            </el-sub-menu>
            <el-menu-item :index="data.path" v-else-if="checkAuth(data.path)">
              <el-icon>
                <component :is="mapIcon[data.icon]"></component>
              </el-icon>
              <span>{{ data.title }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </el-scrollbar>
    </el-aside>
  </div>
</template>
<script setup>
import axios from 'axios'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router';
import { TrendCharts, User, List, Key, Grid, OfficeBuilding, PieChart, School } from '@element-plus/icons-vue'
import useUserStore from '../../store/useUserStore'
const route = useRoute()
const RouteList = ref([])
const mapIcon = {
  TrendCharts, User, List, Key, Grid, OfficeBuilding, PieChart, School
}
const { user: { role: { rights } } } = useUserStore()
//判断侧边栏的权限是否匹配
const checkAuth = (path) => {
  return rights.includes(path)
}
onMounted(async () => {
  const res = await axios.get('/admin/rights')
  // console.log(res.data);
  RouteList.value = res.data
})
</script>
<style lang='scss' scoped></style>